<!--首页顶部-->
<template>
    <!--头部div-->
    <div id="top">
        <el-row type="flex" class="row-bg" justify="space-between" style="margin-top: -50px">
            <el-col :span="6">
                <div class="grid-content bg-purple" style="margin-left: 300px;margin-top: 20px">
                    <router-link to="/"><img src="../img/daohang.png"/></router-link>
                </div>
            </el-col>
            <el-col :span="6" style="margin-top: 30px;margin-left: 30px">
                <form>
                    <el-input style="width: 300px;" v-model="input" placeholder="请输入内容"></el-input>
                    <el-button type="primary" @click="goClass">搜索</el-button>
                </form>
            </el-col>
            <div>
                <el-col :span="7" style="margin-top: 20px;">
                    <div style="width: 600px;height: 60px;float: left">
                        <div>
                            <!--                            <el-button  icon="el-icon-reading" style="float:left;font-size: 25px"  @click="gobook">我的书架</el-button>-->
                            <el-button style="float: left;font-size: 20px" icon="el-icon-reading" @click="loginBook">
                                我的书架
                            </el-button>
                        </div>
                        <div style="color: indianred;float: left">
                            <el-button icon="el-icon-message" @click="MessageCenter"></el-button>
                        </div>
                        <!--                        用户和退出-->

                        <div v-if="token!==null" style="color: indianred;float: left">
                            <el-tooltip effect="blue" placement="bottom" v-model="visible">
                                <div slot="content">
                                    <div style="text-align: right; margin: 0">
                                        <el-button type="primary" size="mini" @click="logout(visible = false)">退出
                                        </el-button>
                                    </div>
                                </div>
                                <el-button icon="el-icon-user-solid" style="height: 51px" @click="safe"></el-button>
                            </el-tooltip>
                        </div>
                        <div v-else-if="token===null" style="float: left">
                            <el-button icon="el-icon-user-solid" style="height: 51px" @click="safe"></el-button>
                        </div>
                    </div>
                </el-col>
            </div>
        </el-row>
        <div>
            <el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="handleClose" style="width: 1200px;margin: auto">
                <div style="height: 300px;margin: auto">
                    <el-form style="margin: auto" :model="form" v-show="showLogin">
                        <div>
                            <el-form-item label="用户名" :label-width="formLabelWidth">
                                <el-input v-model="form.username" autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                        <div style="margin-top: 20px">
                            <el-form-item label="密码" :label-width="formLabelWidth">
                                <el-input v-model="form.password" show-password autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                    <el-form style="margin: auto" :rules="rules" ref="formLogging" :model="formLogging" v-show="showCreat">
                        <div style="margin-right: 20px">
                            <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                                <el-input v-model="formLogging.username" autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                        <div style="margin-top: 20px;margin-right: 20px">
                            <el-form-item label="密码"  :label-width="formLabelWidth" prop="password">
                                <el-input v-model="formLogging.password" show-password autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" :label-width="formLabelWidth" prop="passwordA">
                                <el-input v-model="formLogging.passwordA" show-password autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                    <div slot="footer" v-show="showLogin" class="dialog-footer" style="margin-top: 60px;margin-left: 50px">
                        <el-button type="primary" style="width: 300px" @click="login">登录</el-button>
                        <div style="text-align: right;margin-top: 40px">没有用户？ 前往<el-button type="success"  @click="creat">注册</el-button></div>
                    </div>
                    <div slot="footer" v-show="showCreat" class="dialog-footer" style="margin-top: 20px;margin-left: 60px">
                        <el-button type="primary" style="width: 300px;" @click="logging">注册</el-button>
                        <div style="text-align: right">已有账号前往   <el-button type="success"  @click="log">登录</el-button></div>
                    </div>
                </div>
            </el-dialog>
        </div>

        <hr style="width: 65%">
        <el-menu class="el-menu-demo" mode="horizontal" :router="true">
            <el-submenu index="2" v-for="(i,index) in classify" :key="index">
                <el-menu-item slot="title" :class="i.icon" v-text="i.title" @click="AllClass">全部分类</el-menu-item>
                <el-menu-item index="2-1":class="l.icon"  style="padding-left: 370px;color: #FFB6C1"
                              v-for="(l,index) in i.list" :route="{name:'AllClass',query:{category:l.id}}" :key="index" v-text="l.title">
                </el-menu-item>
                <br>
            </el-submenu>
            <el-menu-item index="3" class="el-icon-s-data" :route="{name:'AllClass',query:{hits:'hits'}}">排行榜</el-menu-item>
            <el-menu-item index="4" :route="{name:'AllClass',query:{serialize:1}}">完本</el-menu-item>
            <a href="#" class="el-icon-s-promotion"
                    style="font-size: 30px;background-color: white;margin-top: 10px;text-decoration: none" @click="writer">
                作家专区
            </a>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: 'TopIndex',
        data() {
            var validatePass  = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.formLogging.password !== '') {
                        this.$refs.formLogging.validateField('checkPass');
                    }
                    callback();
                }
            }
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.formLogging.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                title:"用户登录",
                token: sessionStorage.getItem("token"),
                childValue: false,
                input: '',
                dialogFormVisible: false,
                // 用户弹出框
                visible: false,
                showLogin:true,
                showCreat:false,
                form: {
                    username: '',
                    password: ''
                },
                formLogging: {
                    username: '',
                    password: '',
                    passwordA:''
                },
                formLabelWidth: '120px',
                classify: {},
                rules: {
                    username: [
                        {required: true, message: '用户名不能为空', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        { validator: validatePass, trigger: 'blur'}
                    ],
                    passwordA: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                }
            }
        },
        created() {
            this.$http.post('cate/list').then(response => {
                this.classify = response.data
            })
        },
        methods: {
            goClass(){
              this.$router.replace({name:'AllClass',query:{input:this.input}});
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                        this.showLogin=true;
                        this.showCreat=false;
                    })
                    .catch(_ => {});
            },
            logging(){
                this.$http.post("user/logging",{username:this.formLogging.username,password:this.formLogging.password}).then(response=>{
                        if(response.data===1){
                            this.form.username=this.formLogging.username;
                            this.form.password=this.formLogging.password;
                            this.login()
                        }else if(response.data===3){
                            this.$notify({
                                title: '失败',
                                message: '亲爱的小主.用户名已存在,请重新输入!',
                                type: 'warning'
                            });
                        }else{
                            this.$notify({
                                title: '失败',
                                message: '亲爱的小主.注册失败!',
                                type: 'warning'
                            });
                        }
                })
            },
            log(){
                this.showLogin=true;
                this.showCreat=false;
                this.title="登录界面"
            },
            creat(){
              this.showLogin=false;
              this.showCreat=true;
              this.title="注册界面"
            },
            writer() {
                if(sessionStorage.getItem("token")===null){
                    this.$notify({
                        title: '失败',
                        message: '小主.请先登陆~',
                        type: 'warning'
                    });
                }else{
                    this.$http.post("user/findById", {id: localStorage.getItem("id")}).then(response => {
                        if (response.data.identity === 1) {
                            this.$router.replace("/myWorks");
                        } else {
                            this.$router.replace("/writer");
                        }
                    })
                }

            },
            loginBook() {
                let token = sessionStorage.getItem('token')
                if (token === null) {
                    this.dialogFormVisible = true
                } else {
                    this.$router.replace('BookShelf')
                }
            },
            MessageCenter() {
                let token = sessionStorage.getItem('token')
                if (token === null) {
                    this.dialogFormVisible = true
                } else {
                    this.$router.replace('/MessageCenter')
                }
            },
            safe() {
                let token = sessionStorage.getItem('token')
                if (token === null) {
                    this.dialogFormVisible = true
                } else {
                    this.$router.replace('/SafeCenter')
                }
            },
            AllClass() {
                this.$router.replace({name:'AllClass',params:{title:this.input}})
            },
            login() {
                this.$http.post('login/login', {
                    username: this.form.username,
                    password: this.form.password
                }).then(response => {
                    if (response.data.code === '200') {
                        this.$notify({
                            title: '成功',
                            message: '亲爱的小主.欢迎登录!',
                            type: 'success'
                        });
                        sessionStorage.setItem('token', response.data.token)
                        localStorage.setItem('id', response.data.principal.id)
                        localStorage.setItem('username', response.data.principal.username)
                        localStorage.setItem("title", response.data.principal.title);//作者名
                        localStorage.setItem("imgurl", response.data.principal.headimgurl);
                        location.reload()
                    } else {
                        this.$notify({
                            title: '失败',
                            message: '亲爱的小主.登录失败!',
                            type: 'warning'
                        });
                        location.reload()
                    }
                })
                this.dialogFormVisible = false
            },
            logout() {
                location.reload()
                sessionStorage.clear();
                localStorage.clear();
                this.$notify({
                    title: '成功退出',
                    message: '',
                    type: 'success'
                });
            },

        }
    }
</script>

<style>
    /*去掉元素默认边框*/
    form {
        width: 450px;
    }

    /*调整内部元素位置*/

    /*我的书架字体图标*/
    .el-icon-reading {
        font-size: 25px;
    }

    /*消息中心字体图标*/
    .el-icon-message {
        font-size: 25px;
    }

    /*用户字体图标*/
    .el-icon-user-solid {
        font-size: 30px;
    }

    /*分类字体图标*/
    .el-submenu {
        padding-left: 300px;
    }

    .el-menu-item {
        font-size: 20px;
    }
</style>

<style scoped>

</style>
